<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放器</title>
    <link rel="stylesheet" href="css/music.css">
</head>
<body>
    <div id="app">
        <div class="mian">
            <div class="header">
                <h3>悦耳音乐</h3>
                <input type="text" class="search" v-model="query" @keyup.enter="searchMusic">
            </div>
            <div class="middle">
                <div class="left">
                    <ul class="music_lists">
                        <li v-for="item in musicList">
                            <a href="javascript:;" @click="playMusic(item.id)"></a>
                            <b>{{item.name}}</b>
                            <span v-if="item.mvid!=0" @click="playMv(item.mvid)"></span>
                        </li>
                    </ul>
                </div>
                <div class="center">
                    <img src="img/player_bar.png" class="play_bar" />
                    <!-- 黑胶碟片 -->
                    <img src="img/disc.png" class="disc" />
                    <img :src="musicCover==''?'img/cover.png':musicCover" class="cover autoRotate" />
                </div>
                <div class="right">
                    <h4>热门评论</h4>
                    <div class='comment_list'>
                        <dl v-for="item in musicComment">
                          <dt>
                            <img :src="item.user.avatarUrl" alt="" />
                          </dt>
                          <dd class="name">{{item.user.nickname}}</dd>
                          <dd class="detail">
                            {{item.content}}
                          </dd>
                        </dl>
                        
                    </div>
                </div>
            </div>
            <div class="footer">
                <audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio"></audio>
            </div>
            <div class="video_con" v-show="mvUrl!=''">
                <video :src="mvUrl" controls="controls"></video>
                <button @click="closeMv">-</button>
            </div>
        </div>


    </div>
</body>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/music.js"></script>
</html>